<!-- 求职知道 -->
<template>
  <div class="job-guide">
    <h3>求职指导</h3>
    <ul class="job-guide-list">
      <li class="job-guide-bag">
        <a href="">
          <span>求职锦囊</span>
          <p>多维度求职必备知识</p>
        </a>
      </li>
      <li class="job-guide-bag job-guide-bag-interview">
        <a href="" class="Interview">
          <span>面试宝典</span>
          <p>各类面试真题应有尽有</p>
        </a>
      </li>
      <li class="job-guide-bag job-guide-bag-occupation">
        <a href="" class="occupation">
          <span>职类百科</span>
          <p>求职路上不迷茫</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "JobGuide",
};
</script>

<style lang="less" scoped>
.job-guide {
  margin-bottom: 40px;

  h3 {
    font-size: 28px;
    font-weight: 600;
    color: #222;
    line-height: 40px;
    margin-bottom: 20px;
  }

  .job-guide-list {
    overflow: visible;
    display: flex;
    justify-content: space-between;

    li {
      position: relative;
      width: 384px;
      height: 136px;
      border-radius: 12px;
      padding-left: 0;
      overflow: hidden;
      background: 0 0;
      color: #fff;
      background: linear-gradient(135deg, #fff 0, #fef3f2 100%);

      p {
        font-size: 16px;
        font-weight: 400;
        color: #222;
        line-height: 20px;
        margin-top: 16px;
      }
    }

    .job-guide-bag-interview {
      background: linear-gradient(90deg, #fff 0, #ebfff8 100%);
    }

    .job-guide-bag-occupation {
      background: linear-gradient(135deg, #fff 0, #e2edff 100%);
    }

    .job-guide-bag a {
      text-decoration: none;
      color: #414a60;
      display: block;
      height: 100%;
      width: 354px;
      padding-left: 30px;
      overflow: hidden;
      position: relative;
      background: url(https://img.bosszhipin.com/static/file/2022/8a39plukqx1658136367815.png)
        center right/auto 136px no-repeat;

      span {
        display: inline-block;
        margin-top: 40px;
        color: #f37636;
        font-size: 22px;
        font-weight: 500;
        line-height: 20px;
      }
    }

    .job-guide-bag .Interview {
      background: url(https://img.bosszhipin.com/static/file/2022/6vkv43lhdq1658136368042.png)
        center right/auto 136px no-repeat;
    }

    .job-guide-bag .occupation {
      background: url(https://img.bosszhipin.com/static/file/2022/54v60zekcu1658136368151.png)
        center right/auto 136px no-repeat;
    }
  }
}
</style>